<template>
  <div style="display: none">Route Debugger</div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, onActivated, onDeactivated } from "vue";
import { useRoute } from "vue-router";

const route = useRoute();
const componentName = "RouteDebugger"; // 或者使用props传入组件名称

onMounted(() => {
  console.log(`[${componentName}] mounted - path: ${route.path}`);
});

onUnmounted(() => {
  console.log(`[${componentName}] unmounted - path: ${route.path}`);
});

onActivated(() => {
  console.log(`[${componentName}] activated - path: ${route.path}`);
});

onDeactivated(() => {
  console.log(`[${componentName}] deactivated - path: ${route.path}`);
});
</script>
